<template>
  <h1>watch</h1>
  账号：<input type="text" v-model="message" id="account" /> <br /><br /><br />
  密码：<input type="text" v-model="message1" />
  <br /><br /><br />
  账号111：<input type="text" v-model="obj.a" />
  <br /><br /><br />
  密码22：<input type="text" v-model="obj.b" />
  <button @click="stopWatch">停止监听</button>
  <hr />
  <hr />
  <LifeCycle v-if="flag"></LifeCycle>
  <button @click="flag = !flag">卸载组件、装载组件</button>
</template>
<script lang="ts" setup>
import { watch, ref, watchEffect } from "vue"; 
import LifeCycle from "../lifecycle/lifecycle.vue";
let message = ref<string>("123");
let message1 = ref<string>("456");
let obj = reactive({  
  a:'123',
  b:""
})
let flag = ref<boolean>(true);
// watch
// watch API 与选项式 API this.$watch (以及相应的 watch 选项) 完全等效。watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

// 监听一个值
// watch(message, (newValue, oldValue) => {
//   console.log(newValue, "新的");
//   console.log(oldValue, "旧的");
// });

// 监听多个值
// watch([message, message1], (newValue, oldValue) => {
//   console.log(newValue, "新的");
//   console.log(oldValue, "旧的");
// });

// 监听对象
watch(obj,(val,oval)=>{
  console.log(val,oval,"val,ovalval,ovalval,oval")
})

// watchEffect(
//   () => {
//     /* ... */
//   },
//   {
//     flush: 'pre' //组件更新前执行
//     flush: 'post' //推迟副作用的初始运行，直到组件的首次渲染完成。
//     flush: 'sync' //强制效果始终同步触发
//   }
// )
//立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
// 返回一个函数 用于停止监听
const stop = watchEffect(
  (onInvalidate) => {
    // let input: HTMLInputElement = document.querySelector(
    //   "#account"
    // ) as HTMLInputElement;
    console.log("message==>", message.value);
    // console.log("message1==>", message1.value);
    // console.log(input, "input");
    onInvalidate(() => {
      console.log("before");
    });
  },
  {
    flush: "pre",
    // 当依赖被修改时进入onTrigger()
    onTrigger(e) {
      console.log(e, "进入了onTrigger");
      // debugger;
    },
    // 当依赖被访问时进入onTrack()
    onTrack(e) {
      console.log(e, "进入了onTrack");
      // debugger;
    },
  }
);
const stopWatch = () => stop();
</script>
<style lang="less" scoped></style>
